<template>
  <div>
    <FootComponen></FootComponen>
    <div id="app-root">
      <div class="page-cart">
        <div class="header">
          <div class="title">购物车</div>
        </div>
        <div class="tip">*左滑编辑商品</div>
        <!-- 商品列表 -->
        <div class="item-list" v-if="list.length>=1">
          <div class="item" v-for="item in list" :key="item.id+item.color+item.size">
            <div class="comp-swipe-view" style="transform: translateX(0px)">
              <div class="content">
                <span class="option-btn icon-ok-circled">
                  <van-checkbox v-model="item.checked"></van-checkbox>
                </span>
                <van-swipe-cell>
                  <van-card
                    :price="item.coupon_price"
                    :title="item.name"
                    class="goods-card"
                    :thumb="item.imgurl"
                    price-top="信息"
                  >
                  <template #tags>
    <van-tag plain type="danger" text-color="#000" color="#fff">颜色：{{item.color}}</van-tag>
    <van-tag plain type="danger" text-color="#000" color="#fff"> 尺码：{{item.size}}</van-tag>
  </template>
                  </van-card>
                  <div class="account">
                    <div class="comp-stepper">
                      <!-- 数量加减 -->
                      <van-stepper v-model="item.num" @plus="onplus(item)" @minus="onminus(item)" />
                    </div>
                  </div>
                  <template #right>
                    <van-button
                      square
                      text="删除"
                      type="danger"
                      class="delete-button"
                      @click="del(item)"
                    />
                  </template>
                </van-swipe-cell>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="toolbar" v-if="this.list.length">
          <van-submit-bar
            :price="nums"
            button-text="提交订单"
            @submit="onSubmit"
          >
            <van-checkbox v-model="toggleAll">全选</van-checkbox>
          </van-submit-bar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import FootComponen from "../components/FootComponen.vue";
export default {
  components: {
    FootComponen,
  },
  data() {
    return {
      value: 1,
      list:[]//商品列表
    };
  },
  methods: {
    //点击提交
    onSubmit() {
      if(this.nums==0){
   this.$toast('请勾选商品')
      }
      else{
        //提交到支付页面
        // console.log(this.list);
        let paymentlist=this.list.filter(item=>{
          return    item.checked
        })
        this.$emit('getpaymentlist',paymentlist)
    this.$router.push({name:'order'})
      }
    
    },
    //加
    onplus(item){
         item.num++
         console.log(this.list);
    },
    // 减
    onminus(item){
     if(item.num<=1){
      return
     }
     item.num--
     console.log(this.list);
    },
    //删除
    del(ele){

      this.list=this.list.filter(item=>{
        return !(item.id ==ele.id&&item.color==ele.color&&item.size==ele.size)
      })
    }
  },
  computed:{
     //单选全选
         toggleAll:{
                get(){
                    return this.list.every(item=>{
                        return item.checked;//只要有一个false不满足条件
                    })
                },
                // 点击按钮切换
                set(value){
                    this.list.forEach(item=>{
                        item.checked = value;
                    })
                }
            },
  //  计算总价
      nums(){
        let s= this.list.reduce((total,item)=>{
      if(item.checked){
        return total += item.coupon_price * item.num;
      }else{
        return total
      }
    },0)
    return s*100
      }

  },
  created() {
      //本地存储购物车信息
    if (window.localStorage.getItem("shoppinglist") == null) {
      window.localStorage.setItem("shoppinglist", "[]");
    }
  
    //获取数组
        let shoppinglist = window.localStorage.getItem("shoppinglist");
          shoppinglist = JSON.parse(shoppinglist);
     this.list=shoppinglist
console.log(this.list);

                 //收货订单存储
          if (window.localStorage.getItem("myorderlist") == null) {
      window.localStorage.setItem("myorderlist", "[]");
    }


  },
  beforeDestroy(){
      let  shoppinglist=this.list
           shoppinglist = JSON.stringify(shoppinglist);
      window.localStorage.setItem("shoppinglist", shoppinglist);
  }
};
</script>
<style scoped>
.page-cart .header {
  height: 44px;
  margin: 12px 12px 5px;
  position: relative;
}
.page-cart .header .title {
  font-size: 24px;
  line-height: 44px;
}
.page-cart .tip {
  color: #a9acb3;
  font-size: 12px;
  margin: 12px;
  text-align: right;
}
.page-cart .item-list {
  margin-bottom: 133px;
  overflow: hidden;
}
.page-cart .item-list .item {
  position: relative;
  font-size: 0;
  margin: 10px 12px;
}
.page-cart .item-list .item .del {
  position: absolute;
  right: 0;
  top: 33px;
  width: 60px;
  height: 44px;
  font-size: 28px;
  line-height: 44px;
  text-align: center;
  color: #fc7967;
}
.page-cart .item-list .item .content {
  margin-left: 36px;
  padding: 5px;
  width: calc(100% - 36px);
  background-color: #fff;
}
.page-cart .item-list .item .option-btn {
  position: absolute;
  left: 17px;
  top: 45px;
  width: 36px;
  height: 44px;
}
.page-cart .item-list .item .content .picture {
  display: inline-block;
  width: 100px;
  height: 100px;
}

.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
.account {
  position: absolute;
  right: 10px;
  bottom: 18px;
}
.comp-stepper {
  position: relative;
  display: inline-block;
}
.toolbar,
.van-submit-bar {
  position: fixed;
  width: 100%;
  height: 60px;
  bottom: 50px;
  left: 0;
  right: 0;
}
</style>